<template>
  <div class="topBox">
    <el-radio-group @change="keychang" v-model="selectKey" size="large">
      <el-radio-button label="sale_">销量</el-radio-button>
      <el-radio-button label="_money">销售额</el-radio-button>
    </el-radio-group>
    <el-select
      @change="keychang"
      v-model="selectDay"
      class="m-2"
      placeholder="Select"
      size="large"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
  </div>
  <div id="main">Echart</div>
  <div id="mainMap">Map</div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref, onMounted } from "vue";
import { getAdminIndexDataAPI } from "../request/api";
import * as echarts from "echarts";
import chinaJson from "../assets/china.json";
let selectKey = ref("sale_");
let selectDay = ref("today");
let salePie: salePieType = [];
let myChart: echarts.ECharts;
let options = [
  {
    value: "yesterday",
    label: "昨天",
  },
  {
    value: "today",
    label: "今天",
  },
  {
    value: "three_days",
    label: "前三天",
  },
  {
    value: "seven_days",
    label: "前七天",
  },
  {
    value: "fourteen_days",
    label: "前十四天",
  },
];
const keychang = () => {
  let key = "";
  if (selectKey.value === "sale_") {
    key = selectKey.value + selectDay.value;
  } else {
    key = selectDay.value + selectKey.value;
  }

  const data = salePie.map((item) => {
    return { value: item[key], name: item.name };
  });

  //绘制图
  chartSet(data);
};

//抽离绘制图表函数
const chartSet = (data: { value: string; name: string }[]) => {
  var option;
  option = {
    tooltip: {
      trigger: "item",
      formatter: " {c} ({d}%)",
    },
    legend: {
      right: "10%",
      vertical: true,
      width: "200px",
      height: "100",
    },
    series: [
      {
        type: "pie",
        radius: ["40%", "70%"],
        center: ["25%", "50%"],
        emphasis: {
          //选中效果
          label: {
            show: true,
            fontSize: "20",
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: true,
          length2: 30,
          smooth: false,
          length: 10,
        },
        data,
      },
    ],
  };

  option && myChart.setOption(option);
};
const getDataEchart = async () => {
  let res = await getAdminIndexDataAPI();
  if (res.errno === 0) {
    salePie = res.data.salePie;
    let data = res.data.salePie.map((item) => ({
      value: item.sale_today,
      name: item.name,
    }));
    let mapData = res.data.saleMap.map((item) => ({
      value: item.saleNum,
      name: item.areaName,
    }));

    //====================绘制饼图
    var chartDom = document.getElementById("main");
    myChart = echarts.init(chartDom!);
    chartSet(data);
    //绘制地图
    //@ts-ignore
    echarts.registerMap("china", { geoJSON: chinaJson });
    var chart = echarts.init(document.getElementById("mainMap")!);
    chart.setOption({
      visualMap: {
        realtime: true,
        calculable: true,
        min: 0,
        max: 1000000,
        // 两个手柄对应的数值是 4 和 15
        range: [0, 1000000],
        inRange: {
          color: ["#229FEE", "#0052B6", "#E6F4F1", "#EEE8A9"].reverse(),
          symbolSize: [100, 100],
        },
      },
      tooltip: {
        show: true,
      },

      series: [
        {
          itemStyle: {
            borderWidth: 1,
            borderColor: "#bce8f1",
          },
          tooltip: {
            show: true,
            formatter: "{b0}<br />销量: {c0}",
          },
          emphasis: {
            itemStyle: {
              areaColor: "purple",
            },
            label: {
              show: false,
            },
          },
          type: "map",
          map: "china",
          data: mapData,
        },
      ],
    });
  }
};

getDataEchart();
</script>
<style lang="less" scoped>
#main {
  width: 100%;
  height: 320px;
}
#mainMap {
  width: 100%;
  height: 520px;
}
.topBox {
  box-sizing: border-box;
  padding: 30px 30px;
  display: flex;
  justify-content: space-between;
}
</style>
